<%--
  Created by IntelliJ IDEA.
  User: qingx
  Date: 2018/12/30
  Time: 18:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- jsp文件头和头部 -->
    <%@ include file="../base/top.jsp" %>
    <link rel="stylesheet" href="static/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <style>
        .imageFileInput{
            width: 160px;
            height: 160px;
            margin-left: 20%;
            background-color: grey;
        }
    </style>
</head>

<body class="no-skin">
<div class="main-container ace-save-state" id="main-container">
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12" id="add_teacher">
                        <!-- PAGE CONTENT BEGINS -->
                        <form class="form-horizontal" role="form" style="display: -webkit-flex;-webkit-justify-content: center;-webkit-align-items: center;">
                            <div style="width: 70%;margin-top: 50px">
                                <div class="widget-box">

                                    <div class="widget-header" style="text-align: center">
                                        <h4 class="widget-title">录入学生</h4>
                                    </div>

                                    <div class="widget-main" style="margin-top: 30px;">
                                        <div style="overflow: auto;">
                                            <div style="float: left;width: 28%;">
                                                <img class="imageFileInput" onclick="selectFile();" src="static/images/user_head.jpg">
                                                <form id="uploadForm">
                                                    <input type="file" id="file" name="file"
                                                           style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
                                                           accept="image/*"/>
                                                </form>
                                            </div>

                                            <div style="float: left;width: 70%;margin-bottom: 40px">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right">用户id</label>
                                                    <div style="width: 58.5%;margin-left: 27%">
                                                        <p id="user-id" class="form-control col-xs-10 col-sm-5" >${userId}</p>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right">角色</label>
                                                    <div style="width: 58.5%; margin-left: 27%">
                                                        <select class="chosen-select form-control" id="role"  data-placeholder="Choose a Role...">
                                                            <option value=""></option>
                                                            <c:forEach items="${roleInfos}" var="roleInfo" varStatus="status">
                                                                <c:if test="${roleInfo.roleId == '201812271723138H'}" >
                                                                    <option value="${roleInfo.roleId}" selected>${roleInfo.roleName}</option>
                                                                </c:if>
                                                                <c:if test="${roleInfo.roleId != '201812271723138H'}">
                                                                    <option value="${roleInfo.roleId}">${roleInfo.roleName}</option>
                                                                </c:if>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right">密码</label>
                                                    <div style="width: 140%;margin-left: 27%">
                                                        <input type="password" id="password" placeholder="Please input password" class="col-xs-10 col-sm-5" value="123456"/>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label no-padding-right">确认密码</label>
                                                    <div style="width: 140%;margin-left: 27%">
                                                        <input type="password" id="password-again" placeholder="Please input password again" class="col-xs-10 col-sm-5" value="123456"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="clearfix form-actions" align="center">
                                            <button class="btn btn-info" type="button"  onclick="add()">
                                                Submit
                                            </button> &nbsp; &nbsp; &nbsp;
                                            <button class="btn" type="reset">
                                                Reset
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>

                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp"%>

<script type="text/javascript">
    /*  $(top.hangge());//关闭加载状态
     */

    $(function () {
        //下拉框
        if (!ace.vars['touch']) {
            $('.chosen-select').chosen({allow_single_deselect: true});
            $(window)
                .off('resize.chosen')
                .on('resize.chosen', function () {
                    $('.chosen-select').each(function () {
                        var $this = $(this);
                        $this.next().css({'width': $this.parent().width()});
                    });
                }).trigger('resize.chosen');
            $(document).on('settings.ace.chosen', function (e, event_name, event_val) {
                if (event_name != 'sidebar_collapsed') return;
                $('.chosen-select').each(function () {
                    var $this = $(this);
                    $this.next().css({'width': $this.parent().width()});
                });
            });
            $('#chosen-multiple-style .btn').on('click', function (e) {
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                if (which == 2) $('#form-field-select-4').addClass('tag-input-style');
                else $('#form-field-select-4').removeClass('tag-input-style');
            });
        }
    });

    function selectFile(){
        //触发 文件选择的click事件
        $("#file").trigger("click");
    }

    $("#file").change(function () {
//            $("imageFileInput").attr("src","static/images/user.gif");
        }
    );

    //数据校验
    function checkFormats() {
        if($("#role").val() == "") {
            prompt_alert('warning',"角色不得为空",0);
            return false;
        }
        if($("#password").val() == "") {
            prompt_alert('warning',"密码不得为空",0);
            return false;
        }
        if($("#password-again").val() == "") {
            prompt_alert('warning',"确认密码不得为空",0);
            return false;
        }if($("#password").val() != $("#password-again").val()) {
            prompt_alert('warning',"两次输入密码不一致",0);
            return false;
        }
        return true;
    }

    function add() {
        if(checkFormats()){
            var form = new FormData(document.getElementById("uploadForm"));
            form.append("userId",$("#user-id").html());
            form.append("userPassword",$("#password").val());
            form.append("roleId",$("#role").val());
            $.ajax({
                url:"user/addUser",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    if(data["success"]==true){
                        prompt_alert('success',data["msg"],0);
                    }else{
                        prompt_alert('error',data["msg"],0);
                    }
                },
                error:function(msg){
                    prompt_alert('error',"失败！",0);
                }
            });
        }
    }
</script>
</body>
</html>
